<!-- 发起演练 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 48rpx;" slot="content">发起演练</block>
		</cu-custom>

		<view class="cu-form-group margin-top">
			<view class="title">区域名称</view>
			<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index"
				:range="array" range-key="name">
				<view class="uni-input">{{name}}</view>
			</picker>
		</view>


		<view class="cu-form-group margin-top">
			<view class="title">详细地址</view>
			<input v-model="address" placeholder="请输入详细地址" name="address"></input>
		</view>

		<view class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @click="submit">发送通知</button>

		</view>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getCate()
		},
		data() {
			return {
				index: [0, 0],
				array: [
					[],
					[]
				],
				name: '请选择',
				data: [],
				childArr: [], // 二级分类数据源
				lastObj: null,
				title: '',
				address: '',
			}
		},
		methods: {
			getAn() {
				let [a, b] = this.index
				let child = this.data[a]
				let lastChild = child.children[b]
				this.lastObj = lastChild
			},
			getCate() {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/fireInfo/getSubfieldRegionList',
					data: {

					}
				}).then(function(res) {
					that.data = res.data.data
					// 一级分类的数据源
					that.array[0] = that.data
					// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
					that.childArr = (that.data).map((item) => item.children)
					// 第一次打开时，默认给一级分类添加它的二级分类
					that.array[1] = that.childArr[0]


				}).catch(function(e) {
					console.info("e:", e)
				})
			},
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},

			// 选择任务分类
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let value = e.target.value;
				this.index = value;
				if (this.array[0].length != 0) {
					this.name = this.array[0][this.index[0]].name
				};
				if (this.array[1].length != 0) {
					this.name += ',' + this.array[1][this.index[1]].name
				}

			},
			submit() {
				this.getAn()

				let params = {
					"location": this.address,
					"ucId": this.lastObj.ucId,
					"regionName": this.lastObj.name
				}
				let app = getApp()
				app.globalData.request({
					url: '/wx/fireInfo/drillNotice',
					data: {
						...params
					}
				}).then(function(res) {
					let data = res.data.code
					if (data == 0) {
						uni.showToast({
							title: "发起演练成功"
						})
						uni.navigateBack({
							delta: 2
						});
					} else {
						uni.showToast({
							title: res.data.msg
						})
					}

				}).catch(function(e) {})
			},
		}

	}
</script>

<style scoped>
	.my-btn {
		height: 94rpx;
		margin-top: 80px;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
</style>
